import React from 'react'
import Link from 'next/link'
import PropTypes from 'prop-types';
import BScroll from 'better-scroll'
export default class HomeCase extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentNav:0,
            currentId:0,
            Bscroll: '',
        }
    }
    static getDerivedStateFromProps(nextProps){
        let homeCateData = nextProps.projectCateData
        return{
            homeCateData
        }
    }
    componentDidMount() {
        const wrapper = document.querySelector('.wrapper')
        //选中DOM中定义的 .wrapper 进行初始化
        const scroll = new BScroll(wrapper, {
            scrollX: true,  //开启横向滚动
            click: true,  // better-scroll 默认会阻止浏览器的原生 click 事件
            scrollY: false, //关闭竖向滚动
        })
    }
    render() {
        return (
            <div className='home_case'>
                <div className='case_top'>
                    <img className='case_top_img' src="/static/indexImg/rule@2x.png" alt=""/>
                    <span>经典案例</span>
                </div>
                <div className='case_nav'>
                    <div className='wrapper'>
                        {
                            this.state.homeCateData &&
                            (
                                <ul className='case_list content clearfix' style={{ width: `${1.8 * this.state.homeCateData.length}rem` }}>
                                    {
                                        this.state.homeCateData.map((item,index) => {
                                            return (
                                                <li className={`case_nav_item ${this.state.currentNav === index ? 'isShowCaseNav' : ''}`} key={item.category_name} onClick={this.selectCase.bind(this, index, item.id)}>
                                                    <span>{item.category_name}</span>
                                                </li>
                                            )
                                        })
                                    }

                                </ul>
                            )
                        }

                    </div>
                    <Link href='/case'>
                        <a className='case_nav_more'><span>更多</span></a>
                    </Link>
                </div>

                {
                    this.state.homeCateData &&
                    <div className='case_detail'>
                        <h2 className='case_detail_tit'>{this.state.homeCateData[this.state.currentNav].info.entry_name}</h2>
                        <p className='case_detail_in'   >
                            {this.state.homeCateData[this.state.currentNav].info.project_desc}
                        </p>
                        <div className='case_detail_fo'>
                        </div>
                        <img className='case_detail_img' src={this.state.homeCateData[this.state.currentNav].info.img} alt=""/>
                        <div className='case_detail_but'>
                            <Link href='/case'>
                                <a className='case_link'><span>查看更多案例</span></a>
                            </Link>

                        </div>
                    </div>
                }


            </div>
        )
    }
    selectCase(index, id) {
        this.setState({
            currentNav: index,
            currentId: id
        })
    }
}

HomeCase.propTypes = {
    projectCateData: PropTypes.array
}